Javascript

2024-06-03 15:34| 来源: 网络整理| 查看: 265

1.pop和push尾部删除添加

const arr = [ 1, 2, 3, 4, 5 ] //添加到数组的尾端 arr.push(6) //[1,2,3,4,5,6] //再次调用pop方法就删除了最后一位 arr.pop()//[1,2,3,4,5]

2.unshift和shift头部删除添加

const arr = [ 1, 2, 3, 4, 5 ] //添加到数组的前端 arr.unshift(6) //[6,1,2,3,4,5] //再次调用shift方法就删除了第一位 arr.shift()//[1,2,3,4,5]

3.sort 排序

var arr = [18, 2, 10, 9, 88, 66, 22]; arr.sort(function (a, b) { return b - a; //降序排序从大到小 // return a - b; //升序排序 }); console.log(arr); //[88,66,22,18,10,9,2]

4.reverse 反转，对数组进行就地反转，顺序颠倒

const arr = ["March", "Jan", 6, 2, "A", "a"]; arr.reverse(); console.log(arr);//[ 'a', 'A', 2, 6, 'Jan', 'March' ]

5.splice 截取新增数据

可以选择删除数组中的某一个值，也可以在数组中的某个位置添加一些数据，接收可选参数，三个或以上的参数，第一个为截取的索引位置number类型，第二个截取的个数number类型，第三个或更多实在截取位置添加的参数，可以是任何类型

const arr = ["March", "Jan", 6, 2, "A", "a"]; //在索引为2的位置截取一个，并在索引2的位置后添加8 arr.splice(2, 1, 8); console.log(arr);//[ 'March', 'Jan', 8, 2, 'A', 'a' ] //截取位数不够，就将有的全部且去掉 arr.splice(2, 6); console.log(arr);//[ 'March', 'Jan' ]

6.filter 数据过滤需要一定条件返回对应的数据，接收一个回调函数，有回调函数有三个参数，第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值， filter方法会根据符合这个返回值条件的数据返回一个**新数组，不会改变原数组**

const arr = ["March", "Jan", 6, 2, "A", "a"]; //这里是一个简单的例子，返回类型为string的元素 const newArr = arr.filter((item, index) => typeof item === "string"); console.log(newArr);//[ 'March', 'Jan', 'A', 'a' ]

7.map

map方法只是单纯的返回一个新数组，可以是处理后的，也可以是原数组，接收一个会点函数，回调函数有三个参数第一个是当前遍历的元素，第二个为当前索引，第三个是数组本身，需要一个返回值，从map内部处理过后，回调函数的返回值返回一个新数组

const arr = ["March", "Jan", 6, 2, "A", "a"]; //返回一个number的数组，不是number类型的就返回它们的字段长度 const newArr = arr.map((item, index) => (typeof item === "number" ? item : item.length); console.log(newArr);//[ 5, 3, 6, 2, 1, 1 ]

8.slice数组截取

可以对一个数组进行浅拷贝，接收两个参数，第一个为截取的初始位置，第二个为终止位置（不包括此索引值），如果只填一个参数则从当前索引值截取到最后

const arr = ["March", "Jan", 6, 2, "A", "a"]; const newArr = arr.slice(0, 3); console.log(newArr);//[ 'March', 'Jan', 6 ] const newArr = arr.slice(3); console.log(newArr);//[ 2, 'A', 'a' ]

9.concat数组合并需要两个或以上的数组合并的时候就可以使用cancat快速合并，当然在ES6之后大多都使用扩展运算符进行数组合并了，此方法接收一个或以上得任意类型参数

const arr1 = ["March", "Jan"]; const arr2 = [6, 2, "A", "a"]; const arr3 = { name: "Tom", age: 18, sex: "男", }; //如果参数是数组则会合并 const newArr = arr1.concat(arr2); console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ] //一个以上的参数如果是值类型则会直接添加到数组得最后面 const newArr = arr1.concat(arr2,'Tom'); console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a','Tom' ] //一个以上的参数，为一个对象类型,会直接添加到对象中 const newArr = arr1.concat(arr2,arr3); console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a', { name: 'Tom', age: 18, sex: '男' } ] ES6扩展运算符合并多个数组： ... let arr1 = [0, 1, 3]; let arr2 = ["a", "b", "c"]; let arr3 = ["e", "f", "g"]; let arr = [...arr1, ...arr2, ...arr3];

10.fill填充对数组内容进行覆盖填充，有三个参数，第一个为填充的值，第二个为起始位置（可选），第三个为结束位置，不包含此索引位置（可选）

const arr1 = ["March", "Jan", 6, 2, "A", "a"]; //将666填充到1-4不包括4索引的位置 const newArr = arr1.fill(666, 1, 4); console.log(newArr);//[ 'March', 666, 666, 666, 'A', 'a' ]

11.flatMap和flat 扁平化数组 flatMap与map相似，都是接收一个回调函数，进行处理后返回一个数组，但有一处差别就是flatMap可以对数组进行一层扁平化（仅数组）

Array.prototype.flatMap flat + map 遍历 + 扁平化 const arr = ['123', '456', '789']; const newArr = arr.flatMap(function (item) { return item.split(''); }); console.log(newArr); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']返回了一个新数组 const newArr = arr1.flatMap((item, index) => { return [[item, index]]; }); //仅只能扁平化一层 console.log(newArr);//[[ 'March', 0 ],[ 'Jan', 1 ], [ 6, 2 ], [ 2, 3 ],[ 'A', 4 ],[ 'a', 5 ]]

flat通常在扁平化数组的时候都要使用递归函数，flat方法避免了页面中写递归函数造成大量的代码冗余，flat本身也是使用递归方法来达到数组扁平化的，接收一个number类型的参数，参数是几就可以扁平几层，在不确定有几维数组的情况下，参数为Infinity（无限大），可以扁平任意层次的数组

const arr = [[[[["March"]]]], [[["Jan"]]], [[6]], [[2]], "A", ["a"]]; //扁平参数对等的层数 const newArr = arr.flat(2); console.log(newArr);//[ [ [ 'March' ] ], [ 'Jan' ], 6, 2, 'A', 'a' ] //使用Infinity关键字可以扁平化任意层数数组 const newArr = arr.flat(Infinity); console.log(newArr);//[ 'March', 'Jan', 6, 2, 'A', 'a' ]

12.includes 判断某个值数组中是否存在

在数组中查抄某一个值，返回一个布尔值，有两个参数，第一个你要查找的值，第二个从哪个索引位置开始找

const arr = ["March", "Jan", 6, 2, "A", "a"]; const newArr = arr.includes(6); console.log(newArr);//true //也可以利用这一特性简化判断条件 let name='a' //name是一个变量，可能有很多种可能，判断条件中就会非常冗余 if ( name === 'a' || name === 'A' || name === 6...) { //... } //可以改成这种，看着也非常明了简便 if (['a',"A",6,...].includes(name)) { //... console.log(true) }

13.indexOf 判断数组中是否存在某个值，并返回索引 *写法和includes类似，有两个参数第一个是要找的值，第二个为开始索引， indexOf会在查找到第一个符合条件的参数跳出循环并返回索引，没找到则返回-1 *

const arr = ["March", "Jan", 6, 2, "A", 6, "a"]; const newArr = arr.indexOf(6); //返回索引值 console.log(newArr);//2 //查找6，从索引为3的位置开始找 const newArr = arr.indexOf(6，3); console.log(newArr);//5

14.find 查找符合条件的元素

find查找符合条件的的一个元素并返回那个元素本身,没有则返回undefined，接收一个回调函数，回调函数有三个形参，第一个当前元素，第二个当前索引，第三个数组本身

15.some 数组中至少有一个元素通过测试

*some用于数组中参数其中一个或多个通过了测试，返回一个布尔值，如果有一个或以上通过测试就返回true，一个都没通过返回false，接收一个回调函数，有三个形参，第一个为当前元素，第二个为当前索引，第三个为数组本身，另外，当数组为空时使用some，不论判断条件如何，都会返回false，并且他不会改变数组 *

const arr = ["March", "Jan", 6, 2, "A", "a"]; const newArr = arr.some((item) => typeof item === "string"); //其中一个或以上的元素符合条件就返回true console.log(newArr);//true //只要是数组是空数组，后面的条件不管跟什么返回的永远为false console.log([].some((item) => item==undefined));//false

【本文地址】

公司简介

联系我们